<!DOCTYPE html>
<html lang="zh_CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
        <title>IceCream 冰激凌 | 简约至上</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="./css/lovexhj.css" />
    </head>

    <body>
        <!-- 主体框架 -->
        <div id="Search" v-cloak>
            <!-- Bing今日壁纸 -->
            <div
                :class="{ bingBg: true, bingBgBlackBlur: saveData.AeroState && searchBoxFocus, bingBgBlack: searchBoxFocus }"
                ref="bingBg"
            >
                <!-- 左上角 -->
                <div class="windowLeftTop">
                    <!-- 时间 -->
                    <!-- <div class="soBoxTime">{{ soBoxTime }}</div> -->

                    <!-- 天气 -->
                    <div id="he-plugin-simple"></div>
                    <!-- <div class="weather" v-if="weatherInfo">
                        <p>{{ weatherInfo.city }}</p>
                        <img :src="weatherInfo.wea_img" alt="天气logo" />
                        <p>{{ weatherInfo.wea }}</p>
                        <p>{{ weatherInfo.tem }}°</p>
                    </div> -->
                </div>

                <!-- 网站列表打开 -->
                <div
                    :class="{openAppList: true, openAppListShow: openApp}"
                    @click="openAppList"
                    v-if="saveData.openAppListShow"
                >
                    <i class="el-icon-arrow-up"></i>
                </div>

                <!-- 网站列表 -->
                <div :class="{ appList: true, appListShow: openApp }" v-if="saveData.openAppListShow">
                    <!-- 毛玻璃背景 -->
                    <div :class="{ appListBg: true, appListBgBlur: saveData.AeroState }"></div>

                    <!-- 关闭按钮 -->
                    <div class="closeAppList" @click="openAppList" ref="closeAppList">
                        <i class="el-icon-arrow-down"></i>
                    </div>

                    <!-- 分类 -->
                    <div class="appListFather">
                        <!-- 分类菜单 -->
                        <div class="appListMenu">
                            <div v-for="(item, index) in LinkList" :key="index" @click="scrollMenu(index)">
                                {{ item.navName }}
                            </div>
                        </div>

                        <!-- 分类框架 -->
                        <div class="appListBox" @scroll="shadow" ref="appListBox">
                            <!-- 各种分类 -->
                            <div class="appListClass" v-for="(item, index) in LinkList" :key="index">
                                <!-- 分类标题 -->
                                <p class="appListClassTitle">{{ item.navName }}</p>

                                <!-- 分类列表 -->
                                <div class="appListClassBox">
                                    <div class="appListClassList" v-for="(item2, index2) in item.links" :key="index2">
                                        <a :href="item2.link" target="_blank">
                                            <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item2.content"
                                                placement="bottom"
                                            >
                                                <div>
                                                    <img :src="item2.img" :alt="item2.img" />
                                                    <p>{{ item2.name }}</p>
                                                    <p>{{ item2.content }}</p>
                                                </div>
                                            </el-tooltip>
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!-- 撑开底部 -->
                            <div class="Boom">没有更多内容啦！</div>
                        </div>
                    </div>
                </div>

                <!-- 页脚版权信息 -->
                <div :class="{footer: true, footerNone: openApp}" v-if="saveData.footerText">
                    <div v-if="saveData.bgLinkHref && saveData.bgLinkContent">
                        <p>
                            <a :href="saveData.bgLinkHref" target="_blank">{{ saveData.bgLinkContent }}</a>
                        </p>
                    </div>
                    <div>
                        <p>
                            © {{ time }} IceCreemSearch | THEME MADE BY
                            <a href="https://n0ts.cn" target="_blank">N0ts</a>
                        </p>
                        <p><a href="http://beian.miit.gov.cn" target="_blank">湘ICP备20005603号-2</a></p>
                    </div>
                </div>
            </div>

            <!-- 初始化询问 -->
            <el-dialog title="提示" :visible.sync="initDialog" width="40%">
                <span>是否允许我们将您的设置信息存入到本地缓存，这将获得完美的体验</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="initDialogClose(false)">取 消</el-button>
                    <el-button type="primary" @click="initDialogClose(true)">确 定</el-button>
                </span>
            </el-dialog>

            <!-- 更新提示 -->
            <el-dialog :title="updateLog[0].time + '更新'" :visible.sync="updateDialog" width="40%">
                <span>又更新了一些新功能，是否前往更新日志查看？</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="goLog">立即查看</el-button>
                    <el-button type="primary" @click="updateDialog = false">算了算了</el-button>
                </span>
            </el-dialog>

            <!-- 搜索框 -->
            <div id="soBox" :class="{soBoxtop: openApp}">
                <!-- 主体框框 -->
                <div class="soBoxtext" ref="soBoxtext">
                    <!-- 右侧搜索图标 -->
                    <i class="el-icon-search rightIcon" @click="goBaidu"></i>

                    <!-- 左侧搜索引擎图标 -->
                    <div class="soImg" @click="selectLink">
                        <img :src="saveData.so[saveData.soIndex].icon" />
                    </div>

                    <!-- 搜索框本框 -->
                    <input
                        type="text"
                        id="soBoxtext"
                        v-model="soBoxtext"
                        placeholder="搜点什么..."
                        @focus="SoFocus(true)"
                        @blur="SoFocus(false)"
                        @keyup="SoChange($event)"
                    />
                </div>

                <!-- 搜索结果 -->
                <div class="soBoxlist" ref="soBoxlist">
                    <ul ref="soBoxlist2">
                        <li v-for="(item, index) in soBoxlist" :key="index" @mouseover="hoverSearch(index)">
                            <a
                                :href="saveData.so[saveData.soIndex].linkHead + item"
                                target="_blank"
                                :class="{active: searchSelectIndex == index}"
                                >{{ item }}</a
                            >
                        </li>
                    </ul>
                </div>

                <!-- 搜索引擎切换 -->
                <div :class="{soSelectList: true, soSelectListShow: soSelect}">
                    <div class="soSelect" v-for="(item, index) in saveData.so">
                        <div
                            :class="{active: index == saveData.soIndex}"
                            @click="soSelect1(index)"
                            @contextmenu.prevent=""
                        >
                            <img :src="item.icon" />
                            <p>{{ item.name }}</p>
                        </div>
                    </div>
                    <div class="soSelect soSelectAdd" @click="soSelectAdd = true">
                        <i class="el-icon-plus"></i>
                    </div>
                    <div class="soSelect soSelectClose" @click="selectLink">
                        <i class="el-icon-close"></i>
                    </div>
                </div>

                <!-- 一言 -->
                <p id="hitokoto" ref="hitokoto" v-show="saveData.hitokotoShow">{{ hitokoto }}</p>
            </div>

            <!-- 搜索引擎添加 -->
            <el-dialog title="新增一个搜索引擎" :visible.sync="soSelectAdd">
                <el-form label-width="80px" label-position="top">
                    <el-form-item>
                        <p>搜索引擎名称</p>
                        <p>例如：百度</p>
                        <el-input v-model="soAdd.name" placeholder="搜索引擎名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p>搜索引擎图标</p>
                        <p>例如：https://www.baidu.com/favicon.ico</p>
                        <el-input v-model="soAdd.icon" placeholder="搜索引擎图标"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p>搜索引擎链接</p>
                        <p>例如：https://www.baidu.com/s?wd=</p>
                        <el-input v-model="soAdd.linkHead" placeholder="搜索引擎链接"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="soSelectAddFc" style="width: 100%">添加</el-button>
                </el-form>
            </el-dialog>

            <!-- 设置按钮 -->
            <div
                :class="{optionIcon: true, optionIconNone: openApp, optionIconLeftTop: saveData.settingLocation == 1, optionIconRightTop: saveData.settingLocation == 2, optionIconRightBottom: saveData.settingLocation == 3, optionIconLeftBottom: saveData.settingLocation == 4}"
                @click="leftBar = true"
            >
                <i class="el-icon-setting"></i>
            </div>

            <!-- 侧边菜单 -->
            <el-drawer
                :visible.sync="leftBar"
                :with-header="false"
                direction="ltr"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
            >
                <!-- 关闭按钮 -->
                <i class="closeTab el-icon-close" @click="leftBar = false"></i>
                <el-tabs v-model="tabsActive">
                    <!-- 基本设置 -->
                    <el-tab-pane label="基本" name="option">
                        <div class="tabBox">
                            <p class="h1">本地存储</p>
                            <div class="text">
                                <p>将设置存储在本地</p>
                            </div>
                            <div class="tools">
                                <el-switch
                                    v-model="saveData.updateStorage"
                                    active-color="#13ce66"
                                    @change="StorageStatus"
                                >
                                </el-switch>
                            </div>
                        </div>
                        <div class="tabBox">
                            <p class="h1">底部文字显示</p>
                            <div class="text">
                                <p>是否显示底部文字</p>
                            </div>
                            <div class="tools">
                                <el-switch
                                    v-model="saveData.footerText"
                                    active-color="#13ce66"
                                    @change="footerTextStatus"
                                >
                                </el-switch>
                            </div>
                        </div>
                        <div class="tabBox">
                            <p class="h1">一言显示</p>
                            <div class="text">
                                <p>是否展示一言</p>
                            </div>
                            <div class="tools">
                                <el-switch
                                    v-model="saveData.hitokotoShow"
                                    active-color="#13ce66"
                                    @change="changeHitokotoShow"
                                >
                                </el-switch>
                            </div>
                        </div>
                        <div class="tabBox">
                            <p class="h1">一言类型</p>
                            <div class="text">
                                <p>一言的类型选择</p>
                            </div>
                            <div class="tools">
                                <el-select v-model="saveData.hitokotoIndex" multiple @change="delHitokoto">
                                    <el-option
                                        v-for="item in hitokotoConfig"
                                        :key="item[1]"
                                        :label="item[0]"
                                        :value="item[1]"
                                    >
                                    </el-option>
                                </el-select>
                                <el-button type="primary" icon="el-icon-refresh-left" @click="reloadHitokoto"
                                    >恢复默认</el-button
                                >
                                <el-button type="primary" icon="el-icon-check" @click="saveHitokoto">保存</el-button>
                            </div>
                        </div>
                        <div class="tabBox">
                            <p class="h1">网址导航展示</p>
                            <div class="text">
                                <p>是否展示下方的网址导航</p>
                            </div>
                            <div class="tools">
                                <el-switch
                                    v-model="saveData.openAppListShow"
                                    active-color="#13ce66"
                                    @change="changeOpenAppListShow"
                                >
                                </el-switch>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 样式设置 -->
                    <el-tab-pane label="样式" name="css">
                        <div class="tabBox">
                            <p class="h1">主题色设置</p>
                            <div class="text">
                                <p>设置一个喜欢的主题色</p>
                            </div>
                            <div class="tools">
                                <!-- 颜色预制 -->
                                <div class="colors">
                                    <div
                                        v-for="(item, index) in defaultColors"
                                        :key="index"
                                        @click="changeThemeColor(item)"
                                        :style="'background: ' + item + ';'"
                                    ></div>
                                </div>
                                <el-color-picker
                                    v-model="saveData.themeColor"
                                    color-format="rgb"
                                    @change="changeThemeColor"
                                ></el-color-picker>
                                <br />
                                <el-button type="primary" icon="el-icon-refresh-left" @click="reloadThemeColor"
                                    >重置主题色
                                </el-button>
                            </div>
                        </div>
                        <div class="tabBox">
                            <p class="h1">Bing 壁纸</p>
                            <div class="text">
                                <p>自动获取 Bing 的每日壁纸，如果设置了「外链壁纸」将会覆盖此设置</p>
                            </div>
                            <div class="tools">
                                <el-button type="primary" icon="el-icon-right" @click="selectBgImg(2)"
                                    >下一张
                                </el-button>
                            </div>
                        </div>
                        <div class="tabBox">
                            <p class="h1">外链壁纸</p>
                            <div class="text">
                                <p>允许上传网络图片，网络地址需为图片真实地址</p>
                            </div>
                            <div class="tools">
                                <el-input
                                    v-model="saveData.bgLink"
                                    placeholder="请输入图片链接"
                                    @change="setNowBg(saveData.bgLink)"
                                ></el-input>
                                <el-button type="primary" icon="el-icon-upload" @click="selectBgImg(1)"
                                    >打开图床</el-button
                                >
                                <el-button type="primary" icon="el-icon-refresh" @click="selectBgImg(3)">清空</el-button>
                            </div>
                        </div>
                        <div class="tabBox">
                            <p class="h1">设置按钮位置</p>
                            <div class="text">
                                <p>设置按钮的位置选择</p>
                            </div>
                            <div class="tools">
                                <el-select v-model="saveData.settingLocation" size="small" @change="saveStorage">
                                    <el-option
                                        v-for="item in settingSelect"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="tabBox">
                            <p class="h1">是否开启毛玻璃</p>
                            <div class="text">
                                <p>开启毛玻璃特效</p>
                            </div>
                            <div class="tools">
                                <el-switch
                                    v-model="saveData.AeroState"
                                    active-color="#13ce66"
                                    @change="changeAeroState"
                                >
                                </el-switch>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 搜索引擎设置 -->
                    <el-tab-pane label="搜索" name="search">
                        <div class="tabBox">
                            <p class="h1">搜索框</p>
                            <div class="text">
                                <p>搜索结果显示的数量（1 - 10）</p>
                            </div>
                            <div class="tools">
                                <el-input-number
                                    v-model="saveData.soBoxlistShowNum"
                                    controls-position="right"
                                    @change="soBoxlistUpdate($event)"
                                    :min="0"
                                    :max="10"
                                ></el-input-number>
                            </div>
                        </div>
                        <div class="tabBox">
                            <p class="h1">添加搜索引擎</p>
                            <div class="text">
                                <p>添加一个自己的搜索引擎</p>
                            </div>
                            <div class="tools">
                                <el-button type="success" icon="el-icon-plus" @click="soSelectAdd = true"
                                    >添加</el-button
                                >
                            </div>
                        </div>
                        <div class="tabBox">
                            <p class="h1">搜索引擎列表</p>
                            <div class="text">
                                <p>设置搜索引擎或删除它！</p>
                            </div>
                            <div class="tools">
                                <div
                                    v-for="(item, index) in saveData.so"
                                    :key="index"
                                    class="soItem"
                                    :class="{soItemAction: saveData.soIndex == index}"
                                    @click="saveData.soIndex = index"
                                >
                                    <div>
                                        <i
                                            class="el-icon-check"
                                            :class="{'el-icon-check-action': saveData.soIndex == index}"
                                        ></i>
                                        <p>{{ item.name }}</p>
                                    </div>
                                    <i class="el-icon-close" @click.stop="soSelectDelFc(index)"></i>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 用户同步设置 -->
                    <el-tab-pane label="用户" name="user">
                        <div class="tabBox" v-if="!saveData.gitee.giteeName">
                            <p class="h1">登陆 Gitee-码云</p>
                            <div class="text">
                                <p>登陆来同步您的数据配置！</p>
                            </div>
                            <div class="tools">
                                <el-button type="primary" @click="goGitee">前往授权</el-button>
                            </div>
                        </div>
                        <div class="tabBox" v-else>
                            <p class="h1">欢迎您！{{ saveData.gitee.giteeName }}</p>
                            <img :src="saveData.gitee.giteeAvatar" alt="headImg" class="headImg" />
                            <div class="text">
                                <p>我们会创建一个名为「IceCreamSearchData」的仓库用来存储您的数据</p>
                                <p>改完任何设置记得来这里上传数据哦！</p>
                            </div>
                            <div class="tools">
                                <el-button type="primary" @click="checkRepos">创建仓库</el-button>
                                <el-button type="primary" @click="pushDataToGitee">上传数据</el-button>
                                <el-button type="primary" @click="pullDataToGitee">获取数据</el-button>
                                <el-button type="primary" @click="logout">注销</el-button>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 其他设置 -->
                    <el-tab-pane label="其他" name="load">
                        <div class="tabBox">
                            <p class="h1">重置全部设置</p>
                            <div class="text">
                                <p>将全部配置还原到最初</p>
                            </div>
                            <div class="tools">
                                <el-button type="primary" icon="el-icon-refresh-right" @click="reloadSetting(true)"
                                    >重置</el-button
                                >
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 关于 -->
                    <el-tab-pane label="关于" name="about">
                        <div class="tabBox">
                            <p class="h1">{{ about.name }}</p>
                            <div class="text" v-html="about.context"></div>
                        </div>
                        <div class="tabBox updataInfo">
                            <p class="h1">更新日志</p>
                            <div class="text">
                                <div v-for="(item, index) in updateLog" :key="index">
                                    <p class="timeTitle">{{ item.time }}</p>
                                    <div class="logBox">
                                        <div v-for="(item2, index2) in item.log" :key="index2">
                                            <p :style="item2.color" class="logType">{{ item2.type }}</p>
                                            <p>{{ item2.text }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-drawer>
        </div>

        <!-- js引用 -->
        <script>
            WIDGET = {
                CONFIG: {
                    modules: "01234",
                    background: "5",
                    tmpColor: "FFFFFF",
                    tmpSize: "16",
                    cityColor: "FFFFFF",
                    citySize: "16",
                    aqiColor: "FFFFFF",
                    aqiSize: "16",
                    weatherIconSize: "24",
                    alertIconSize: "18",
                    // padding: "10px 10px 10px 10px",
                    shadow: "5",
                    language: "auto",
                    borderRadius: "10",
                    fixed: "false",
                    vertical: "top",
                    horizontal: "left",
                    key: "830640491aae49549ec6a348d34f9ffc"
                }
            };
        </script>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.3/vue-resource.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
        <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
        <script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script>
        <script src="./js/lovexhj.js" type="module"></script>
    </body>
</html>
